<template>
    <div ref="MapView" style="width:100%;height:100%">
        <div class="control">
            <RadioGroup v-model="SenceMode" type="button" @on-change="changeSenceMode">
                <Radio label="2D"></Radio>
                <Radio label="3D"></Radio>
            </RadioGroup>
            <br>
            航向角： <Slider v-model="heading" :min="0" :max="360"></Slider>
            俯仰角：<Slider v-model="pitch" :min="-90" :max="90"></Slider>
            翻滚角：<Slider v-model="roll" :min="0" :max="360"></Slider>
            扫描面颜色：
            <ColorPicker v-model="Color" alpha />&nbsp;<br><br>
            ---------------------------------------------------------------------------
            <br>
        </div>
    </div>
</template>

<script>

import simpleMap from '../../components/simpleMap'
import gsap from 'gsap';
var map = null;
var mapConfig = [{
    "type": "TD",
    "name": "天地图",
    "layerType": "background",
    "url": "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
    "default": false
}]
// 随机函数
function randomNum(min, max) {
    return parseFloat(Math.random() * (max - min + 1) + min, 10);
}

// 由于方位变换属性需要用到 坐标，故放在外面
let l = Cesium.Cartesian3.fromDegrees(117.224, 31.819, 200000);
var _Entity = null;






function Trangles(options) {
    this._viewer = options.viewer
    this._modelMatrix = options.modelMatrix
    this.arr = options.arr;
    this._color = options.color;

    this.vs = `
        attribute vec3 position3DHigh;
        attribute vec3 position3DLow;
        void main() {
          vec4 p = czm_translateRelativeToEye(position3DHigh, position3DLow);
          p = czm_modelViewProjectionRelativeToEye * p;
          gl_Position = p;
        }`;

    this.fs = this.renderFS();
}
Trangles.prototype.renderFS = function () {
    return `void main(){gl_FragColor=vec4(${this._color.red},${this._color.green},${this._color.blue},${this._color.alpha});}`;
}

//用prototype给定方法和属性
Trangles.prototype.getCommand = function (context) {
    //顶点着色器
    let v = this.vs;
    //片元着色器
    let f = this.fs;
    //shaderProgram将两个着色器合并
    var shaderProgram = Cesium.ShaderProgram.fromCache({
        context: context,
        vertexShaderSource: v,
        fragmentShaderSource: f
    })
    //渲染状态
    var renderState = Cesium.RenderState.fromCache({
        depthTest: {
            enabled: true
        },
        depthMask: false,
        blending: Cesium.BlendingState.ALPHA_BLEND
    })
    // //索引数组Buffer
    var indexBuffer = Cesium.Buffer.createIndexBuffer({
        context: context,
        typedArray: new Uint32Array([0, 1, 2, 3, 4, 5]), //索引顺序
        usage: Cesium.BufferUsage.STATIC_DRAW,
        indexDatatype: Cesium.IndexDatatype.UNSIGNED_INT
    })
    //顶点数组Buffer
    var vertexBuffer = Cesium.Buffer.createVertexBuffer({
        context: context,
        typedArray: Cesium.ComponentDatatype.createTypedArray(
            Cesium.ComponentDatatype.FLOAT,
            this.arr,
        ),
        usage: Cesium.BufferUsage.STATIC_DRAW
    })
    //用来表示逐个顶点的信息
    var attributes = []
    attributes.push({
        index: 0,
        vertexBuffer: vertexBuffer,
        componentDatatype: Cesium.ComponentDatatype.FLOAT,
        componentsPerAttribute: 3,
        normalize: false
    })
    //顶点数组（设置顶点属性和索引Buffer）
    var vertexArray = new Cesium.VertexArray({
        context: context,
        attributes: attributes,
        // indexBuffer: indexBuffer
    })

    //新建一个DrawCommand
    this.pointCommand = new Cesium.DrawCommand({
        primitiveType: Cesium.PrimitiveType.TRIANGLES,
        shaderProgram: shaderProgram,
        renderState: renderState,
        vertexArray: vertexArray,
        pass: Cesium.Pass.OPAQUE,
        modelMatrix: this._modelMatrix
    })
}
Trangles.prototype.destroy = function () {
    //this.arr = [];
}
Trangles.prototype.update = function (frameState) {
    this.fs = this.renderFS();
    if (this.pointCommand) {
        var commandList = frameState.commandList
        commandList.push(this.pointCommand)
        this.getCommand(this._viewer.scene.context);
        this._viewer.scene.requestRender()
    } else {
        this.getCommand(this._viewer.scene.context)
    }
}
//模型矩阵
var position = Cesium.Cartesian3.fromDegrees(119, 40, 0)
var heading = Cesium.Math.toRadians(0)
var pitch = Cesium.Math.toRadians(0)
var roll = Cesium.Math.toRadians(0)
var headingPitchRoll = new Cesium.HeadingPitchRoll(heading, pitch, roll)

var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, headingPitchRoll, Cesium.Ellipsoid.WGS84, Cesium.Transforms.eastNorthUpToFixedFrame, new Cesium.Matrix4())
//顶点数组
// var arr = [0, 0, 0, 100000, 0, 0, 100000, 40000, 0]
var color = new Cesium.Color(0, 0, 1, 0.4);

var _arr = [10000, 0, 100000, 9961.946980917455, 871.5574274765817, 100000, 10000, 0, 0, 10000, 0, 0, 9961.946980917455, 871.5574274765817, 0, 9961.946980917455, 871.5574274765817, 100000, 9961.946980917455, 871.5574274765817, 100000, 9848.07753012208, 1736.4817766693034, 100000, 9961.946980917455, 871.5574274765817, 0, 9961.946980917455, 871.5574274765817, 0, 9848.07753012208, 1736.4817766693034, 0, 9848.07753012208, 1736.4817766693034, 100000, 9848.07753012208, 1736.4817766693034, 100000, 9659.258262890684, 2588.1904510252075, 100000, 9848.07753012208, 1736.4817766693034, 0, 9848.07753012208, 1736.4817766693034, 0, 9659.258262890684, 2588.1904510252075, 0, 9659.258262890684, 2588.1904510252075, 100000, 9659.258262890684, 2588.1904510252075, 100000, 9396.926207859084, 3420.2014332566873, 100000, 9659.258262890684, 2588.1904510252075, 0, 9659.258262890684, 2588.1904510252075, 0, 9396.926207859084, 3420.2014332566873, 0, 9396.926207859084, 3420.2014332566873, 100000, 9396.926207859084, 3420.2014332566873, 100000, 9063.0778703665, 4226.182617406995, 100000, 9396.926207859084, 3420.2014332566873, 0, 9396.926207859084, 3420.2014332566873, 0, 9063.0778703665, 4226.182617406995, 0, 9063.0778703665, 4226.182617406995, 100000, 9063.0778703665, 4226.182617406995, 100000, 8660.254037844386, 4999.999999999999, 100000, 9063.0778703665, 4226.182617406995, 0, 9063.0778703665, 4226.182617406995, 0, 8660.254037844386, 4999.999999999999, 0, 8660.254037844386, 4999.999999999999, 100000, 8660.254037844386, 4999.999999999999, 100000, 8191.520442889918, 5735.7643635104605, 100000, 8660.254037844386, 4999.999999999999, 0, 8660.254037844386, 4999.999999999999, 0, 8191.520442889918, 5735.7643635104605, 0, 8191.520442889918, 5735.7643635104605, 100000, 8191.520442889918, 5735.7643635104605, 100000, 7660.4444311897805, 6427.876096865392, 100000, 8191.520442889918, 5735.7643635104605, 0, 8191.520442889918, 5735.7643635104605, 0, 7660.4444311897805, 6427.876096865392, 0, 7660.4444311897805, 6427.876096865392, 100000, 7660.4444311897805, 6427.876096865392, 100000, 7071.067811865476, 7071.067811865475, 100000, 7660.4444311897805, 6427.876096865392, 0, 7660.4444311897805, 6427.876096865392, 0, 7071.067811865476, 7071.067811865475, 0, 7071.067811865476, 7071.067811865475, 100000, 7071.067811865476, 7071.067811865475, 100000, 6427.876096865393, 7660.4444311897805, 100000, 7071.067811865476, 7071.067811865475, 0, 7071.067811865476, 7071.067811865475, 0, 6427.876096865393, 7660.4444311897805, 0, 6427.876096865393, 7660.4444311897805, 100000, 6427.876096865393, 7660.4444311897805, 100000, 5735.7643635104605, 8191.520442889918, 100000, 6427.876096865393, 7660.4444311897805, 0, 6427.876096865393, 7660.4444311897805, 0, 5735.7643635104605, 8191.520442889918, 0, 5735.7643635104605, 8191.520442889918, 100000, 5735.7643635104605, 8191.520442889918, 100000, 5000.000000000001, 8660.254037844386, 100000, 5735.7643635104605, 8191.520442889918, 0, 5735.7643635104605, 8191.520442889918, 0, 5000.000000000001, 8660.254037844386, 0, 5000.000000000001, 8660.254037844386, 100000, 5000.000000000001, 8660.254037844386, 100000, 4226.182617406995, 9063.0778703665, 100000, 5000.000000000001, 8660.254037844386, 0, 5000.000000000001, 8660.254037844386, 0, 4226.182617406995, 9063.0778703665, 0, 4226.182617406995, 9063.0778703665, 100000, 4226.182617406995, 9063.0778703665, 100000, 3420.2014332566882, 9396.926207859084, 100000, 4226.182617406995, 9063.0778703665, 0, 4226.182617406995, 9063.0778703665, 0, 3420.2014332566882, 9396.926207859084, 0, 3420.2014332566882, 9396.926207859084, 100000, 3420.2014332566882, 9396.926207859084, 100000, 2588.1904510252075, 9659.258262890684, 100000, 3420.2014332566882, 9396.926207859084, 0, 3420.2014332566882, 9396.926207859084, 0, 2588.1904510252075, 9659.258262890684, 0, 2588.1904510252075, 9659.258262890684, 100000, 2588.1904510252075, 9659.258262890684, 100000, 1736.481776669304, 9848.07753012208, 100000, 2588.1904510252075, 9659.258262890684, 0, 2588.1904510252075, 9659.258262890684, 0, 1736.481776669304, 9848.07753012208, 0, 1736.481776669304, 9848.07753012208, 100000, 1736.481776669304, 9848.07753012208, 100000, 871.5574274765813, 9961.946980917455, 100000, 1736.481776669304, 9848.07753012208, 0, 1736.481776669304, 9848.07753012208, 0, 871.5574274765813, 9961.946980917455, 0, 871.5574274765813, 9961.946980917455, 100000, 871.5574274765813, 9961.946980917455, 100000, 6.123233995736766e-13, 10000, 100000, 871.5574274765813, 9961.946980917455, 0, 871.5574274765813, 9961.946980917455, 0, 6.123233995736766e-13, 10000, 0, 6.123233995736766e-13, 10000, 100000, 6.123233995736766e-13, 10000, 100000, -871.5574274765823, 9961.946980917455, 100000, 6.123233995736766e-13, 10000, 0, 6.123233995736766e-13, 10000, 0, -871.5574274765823, 9961.946980917455, 0, -871.5574274765823, 9961.946980917455, 100000, -871.5574274765823, 9961.946980917455, 100000, -1736.4817766693031, 9848.07753012208, 100000, -871.5574274765823, 9961.946980917455, 0, -871.5574274765823, 9961.946980917455, 0, -1736.4817766693031, 9848.07753012208, 0, -1736.4817766693031, 9848.07753012208, 100000, -1736.4817766693031, 9848.07753012208, 100000, -2588.1904510252084, 9659.258262890684, 100000, -1736.4817766693031, 9848.07753012208, 0, -1736.4817766693031, 9848.07753012208, 0, -2588.1904510252084, 9659.258262890684, 0, -2588.1904510252084, 9659.258262890684, 100000, -2588.1904510252084, 9659.258262890684, 100000, -3420.2014332566873, 9396.926207859084, 100000, -2588.1904510252084, 9659.258262890684, 0, -2588.1904510252084, 9659.258262890684, 0, -3420.2014332566873, 9396.926207859084, 0, -3420.2014332566873, 9396.926207859084, 100000, -3420.2014332566873, 9396.926207859084, 100000, -4226.182617406993, 9063.0778703665, 100000, -3420.2014332566873, 9396.926207859084, 0, -3420.2014332566873, 9396.926207859084, 0, -4226.182617406993, 9063.0778703665, 0, -4226.182617406993, 9063.0778703665, 100000, -4226.182617406993, 9063.0778703665, 100000, -4999.999999999998, 8660.254037844386, 100000, -4226.182617406993, 9063.0778703665, 0, -4226.182617406993, 9063.0778703665, 0, -4999.999999999998, 8660.254037844386, 0, -4999.999999999998, 8660.254037844386, 100000, -4999.999999999998, 8660.254037844386, 100000, -5735.764363510459, 8191.520442889921, 100000, -4999.999999999998, 8660.254037844386, 0, -4999.999999999998, 8660.254037844386, 0, -5735.764363510459, 8191.520442889921, 0, -5735.764363510459, 8191.520442889921, 100000, -5735.764363510459, 8191.520442889921, 100000, -6427.876096865393, 7660.4444311897805, 100000, -5735.764363510459, 8191.520442889921, 0, -5735.764363510459, 8191.520442889921, 0, -6427.876096865393, 7660.4444311897805, 0, -6427.876096865393, 7660.4444311897805, 100000, -6427.876096865393, 7660.4444311897805, 100000, -7071.067811865475, 7071.067811865476, 100000, -6427.876096865393, 7660.4444311897805, 0, -6427.876096865393, 7660.4444311897805, 0, -7071.067811865475, 7071.067811865476, 0, -7071.067811865475, 7071.067811865476, 100000, -7071.067811865475, 7071.067811865476, 100000, -7660.444431189779, 6427.876096865395, 100000, -7071.067811865475, 7071.067811865476, 0, -7071.067811865475, 7071.067811865476, 0, -7660.444431189779, 6427.876096865395, 0, -7660.444431189779, 6427.876096865395, 100000, -7660.444431189779, 6427.876096865395, 100000, -8191.520442889916, 5735.764363510464, 100000, -7660.444431189779, 6427.876096865395, 0, -7660.444431189779, 6427.876096865395, 0, -8191.520442889916, 5735.764363510464, 0, -8191.520442889916, 5735.764363510464, 100000, -8191.520442889916, 5735.764363510464, 100000, -8660.254037844386, 4999.999999999999, 100000, -8191.520442889916, 5735.764363510464, 0, -8191.520442889916, 5735.764363510464, 0, -8660.254037844386, 4999.999999999999, 0, -8660.254037844386, 4999.999999999999, 100000, -8660.254037844386, 4999.999999999999, 100000, -9063.0778703665, 4226.182617406995, 100000, -8660.254037844386, 4999.999999999999, 0, -8660.254037844386, 4999.999999999999, 0, -9063.0778703665, 4226.182617406995, 0, -9063.0778703665, 4226.182617406995, 100000, -9063.0778703665, 4226.182617406995, 100000, -9396.926207859084, 3420.2014332566887, 100000, -9063.0778703665, 4226.182617406995, 0, -9063.0778703665, 4226.182617406995, 0, -9396.926207859084, 3420.2014332566887, 0, -9396.926207859084, 3420.2014332566887, 100000, -9396.926207859084, 3420.2014332566887, 100000, -9659.258262890682, 2588.19045102521, 100000, -9396.926207859084, 3420.2014332566887, 0, -9396.926207859084, 3420.2014332566887, 0, -9659.258262890682, 2588.19045102521, 0, -9659.258262890682, 2588.19045102521, 100000, -9659.258262890682, 2588.19045102521, 100000, -9848.07753012208, 1736.4817766693027, 100000, -9659.258262890682, 2588.19045102521, 0, -9659.258262890682, 2588.19045102521, 0, -9848.07753012208, 1736.4817766693027, 0, -9848.07753012208, 1736.4817766693027, 100000, -9848.07753012208, 1736.4817766693027, 100000, -9961.946980917455, 871.5574274765863, 100000, -9848.07753012208, 1736.4817766693027, 0, -9848.07753012208, 1736.4817766693027, 0, -9961.946980917455, 871.5574274765863, 0, -9961.946980917455, 871.5574274765863, 100000, -9961.946980917455, 871.5574274765863, 100000, -10000, 1.2246467991473533e-12, 100000, -9961.946980917455, 871.5574274765863, 0, -9961.946980917455, 871.5574274765863, 0, -10000, 1.2246467991473533e-12, 0, -10000, 1.2246467991473533e-12, 100000, -10000, 1.2246467991473533e-12, 100000, -9961.946980917455, -871.5574274765794, 100000, -10000, 1.2246467991473533e-12, 0, -10000, 1.2246467991473533e-12, 0, -9961.946980917455, -871.5574274765794, 0, -9961.946980917455, -871.5574274765794, 100000, -9961.946980917455, -871.5574274765794, 100000, -9848.07753012208, -1736.4817766693047, 100000, -9961.946980917455, -871.5574274765794, 0, -9961.946980917455, -871.5574274765794, 0, -9848.07753012208, -1736.4817766693047, 0, -9848.07753012208, -1736.4817766693047, 100000, -9848.07753012208, -1736.4817766693047, 100000, -9659.258262890684, -2588.1904510252034, 100000, -9848.07753012208, -1736.4817766693047, 0, -9848.07753012208, -1736.4817766693047, 0, -9659.258262890684, -2588.1904510252034, 0, -9659.258262890684, -2588.1904510252034, 100000, -9659.258262890684, -2588.1904510252034, 100000, -9396.926207859084, -3420.2014332566864, 100000, -9659.258262890684, -2588.1904510252034, 0, -9659.258262890684, -2588.1904510252034, 0, -9396.926207859084, -3420.2014332566864, 0, -9396.926207859084, -3420.2014332566864, 100000, -9396.926207859084, -3420.2014332566864, 100000, -9063.0778703665, -4226.182617406993, 100000, -9396.926207859084, -3420.2014332566864, 0, -9396.926207859084, -3420.2014332566864, 0, -9063.0778703665, -4226.182617406993, 0, -9063.0778703665, -4226.182617406993, 100000, -9063.0778703665, -4226.182617406993, 100000, -8660.254037844386, -5000.000000000001, 100000, -9063.0778703665, -4226.182617406993, 0, -9063.0778703665, -4226.182617406993, 0, -8660.254037844386, -5000.000000000001, 0, -8660.254037844386, -5000.000000000001, 100000, -8660.254037844386, -5000.000000000001, 100000, -8191.520442889921, -5735.764363510459, 100000, -8660.254037844386, -5000.000000000001, 0, -8660.254037844386, -5000.000000000001, 0, -8191.520442889921, -5735.764363510459, 0, -8191.520442889921, -5735.764363510459, 100000, -8191.520442889921, -5735.764363510459, 100000, -7660.444431189781, -6427.876096865392, 100000, -8191.520442889921, -5735.764363510459, 0, -8191.520442889921, -5735.764363510459, 0, -7660.444431189781, -6427.876096865392, 0, -7660.444431189781, -6427.876096865392, 100000, -7660.444431189781, -6427.876096865392, 100000, -7071.067811865477, -7071.067811865475, 100000, -7660.444431189781, -6427.876096865392, 0, -7660.444431189781, -6427.876096865392, 0, -7071.067811865477, -7071.067811865475, 0, -7071.067811865477, -7071.067811865475, 100000, -7071.067811865477, -7071.067811865475, 100000, -6427.876096865395, -7660.444431189779, 100000, -7071.067811865477, -7071.067811865475, 0, -7071.067811865477, -7071.067811865475, 0, -6427.876096865395, -7660.444431189779, 0, -6427.876096865395, -7660.444431189779, 100000, -6427.876096865395, -7660.444431189779, 100000, -5735.764363510464, -8191.520442889916, 100000, -6427.876096865395, -7660.444431189779, 0, -6427.876096865395, -7660.444431189779, 0, -5735.764363510464, -8191.520442889916, 0, -5735.764363510464, -8191.520442889916, 100000, -5735.764363510464, -8191.520442889916, 100000, -5000.000000000005, -8660.254037844385, 100000, -5735.764363510464, -8191.520442889916, 0, -5735.764363510464, -8191.520442889916, 0, -5000.000000000005, -8660.254037844385, 0, -5000.000000000005, -8660.254037844385, 100000, -5000.000000000005, -8660.254037844385, 100000, -4226.182617406999, -9063.077870366496, 100000, -5000.000000000005, -8660.254037844385, 0, -5000.000000000005, -8660.254037844385, 0, -4226.182617406999, -9063.077870366496, 0, -4226.182617406999, -9063.077870366496, 100000, -4226.182617406999, -9063.077870366496, 100000, -3420.2014332566937, -9396.926207859082, 100000, -4226.182617406999, -9063.077870366496, 0, -4226.182617406999, -9063.077870366496, 0, -3420.2014332566937, -9396.926207859082, 0, -3420.2014332566937, -9396.926207859082, 100000, -3420.2014332566937, -9396.926207859082, 100000, -2588.190451025206, -9659.258262890684, 100000, -3420.2014332566937, -9396.926207859082, 0, -3420.2014332566937, -9396.926207859082, 0, -2588.190451025206, -9659.258262890684, 0, -2588.190451025206, -9659.258262890684, 100000, -2588.190451025206, -9659.258262890684, 100000, -1736.4817766693034, -9848.07753012208, 100000, -2588.190451025206, -9659.258262890684, 0, -2588.190451025206, -9659.258262890684, 0, -1736.4817766693034, -9848.07753012208, 0, -1736.4817766693034, -9848.07753012208, 100000, -1736.4817766693034, -9848.07753012208, 100000, -871.5574274765825, -9961.946980917455, 100000, -1736.4817766693034, -9848.07753012208, 0, -1736.4817766693034, -9848.07753012208, 0, -871.5574274765825, -9961.946980917455, 0, -871.5574274765825, -9961.946980917455, 100000, -871.5574274765825, -9961.946980917455, 100000, -1.83697019872103e-12, -10000, 100000, -871.5574274765825, -9961.946980917455, 0, -871.5574274765825, -9961.946980917455, 0, -1.83697019872103e-12, -10000, 0, -1.83697019872103e-12, -10000, 100000, -1.83697019872103e-12, -10000, 100000, 871.5574274765789, -9961.946980917455, 100000, -1.83697019872103e-12, -10000, 0, -1.83697019872103e-12, -10000, 0, 871.5574274765789, -9961.946980917455, 0, 871.5574274765789, -9961.946980917455, 100000, 871.5574274765789, -9961.946980917455, 100000, 1736.4817766692997, -9848.077530122082, 100000, 871.5574274765789, -9961.946980917455, 0, 871.5574274765789, -9961.946980917455, 0, 1736.4817766692997, -9848.077530122082, 0, 1736.4817766692997, -9848.077530122082, 100000, 1736.4817766692997, -9848.077530122082, 100000, 2588.190451025211, -9659.258262890682, 100000, 1736.4817766692997, -9848.077530122082, 0, 1736.4817766692997, -9848.077530122082, 0, 2588.190451025211, -9659.258262890682, 0, 2588.190451025211, -9659.258262890682, 100000, 2588.190451025211, -9659.258262890682, 100000, 3420.2014332566814, -9396.926207859085, 100000, 2588.190451025211, -9659.258262890682, 0, 2588.190451025211, -9659.258262890682, 0, 3420.2014332566814, -9396.926207859085, 0, 3420.2014332566814, -9396.926207859085, 100000, 3420.2014332566814, -9396.926207859085, 100000, 4226.182617406996, -9063.077870366498, 100000, 3420.2014332566814, -9396.926207859085, 0, 3420.2014332566814, -9396.926207859085, 0, 4226.182617406996, -9063.077870366498, 0, 4226.182617406996, -9063.077870366498, 100000, 4226.182617406996, -9063.077870366498, 100000, 5000.000000000001, -8660.254037844386, 100000, 4226.182617406996, -9063.077870366498, 0, 4226.182617406996, -9063.077870366498, 0, 5000.000000000001, -8660.254037844386, 0, 5000.000000000001, -8660.254037844386, 100000, 5000.000000000001, -8660.254037844386, 100000, 5735.7643635104605, -8191.520442889918, 100000, 5000.000000000001, -8660.254037844386, 0, 5000.000000000001, -8660.254037844386, 0, 5735.7643635104605, -8191.520442889918, 0, 5735.7643635104605, -8191.520442889918, 100000, 5735.7643635104605, -8191.520442889918, 100000, 6427.876096865392, -7660.444431189781, 100000, 5735.7643635104605, -8191.520442889918, 0, 5735.7643635104605, -8191.520442889918, 0, 6427.876096865392, -7660.444431189781, 0, 6427.876096865392, -7660.444431189781, 100000, 6427.876096865392, -7660.444431189781, 100000, 7071.067811865473, -7071.067811865477, 100000, 6427.876096865392, -7660.444431189781, 0, 6427.876096865392, -7660.444431189781, 0, 7071.067811865473, -7071.067811865477, 0, 7071.067811865473, -7071.067811865477, 100000, 7071.067811865473, -7071.067811865477, 100000, 7660.444431189778, -6427.876096865396, 100000, 7071.067811865473, -7071.067811865477, 0, 7071.067811865473, -7071.067811865477, 0, 7660.444431189778, -6427.876096865396, 0, 7660.444431189778, -6427.876096865396, 100000, 7660.444431189778, -6427.876096865396, 100000, 8191.520442889916, -5735.764363510465, 100000, 7660.444431189778, -6427.876096865396, 0, 7660.444431189778, -6427.876096865396, 0, 8191.520442889916, -5735.764363510465, 0, 8191.520442889916, -5735.764363510465, 100000, 8191.520442889916, -5735.764363510465, 100000, 8660.254037844385, -5000.000000000005, 100000, 8191.520442889916, -5735.764363510465, 0, 8191.520442889916, -5735.764363510465, 0, 8660.254037844385, -5000.000000000005, 0, 8660.254037844385, -5000.000000000005, 100000, 8660.254037844385, -5000.000000000005, 100000, 9063.077870366496, -4226.182617407, 100000, 8660.254037844385, -5000.000000000005, 0, 8660.254037844385, -5000.000000000005, 0, 9063.077870366496, -4226.182617407, 0, 9063.077870366496, -4226.182617407, 100000, 9063.077870366496, -4226.182617407, 100000, 9396.926207859084, -3420.201433256686, 100000, 9063.077870366496, -4226.182617407, 0, 9063.077870366496, -4226.182617407, 0, 9396.926207859084, -3420.201433256686, 0, 9396.926207859084, -3420.201433256686, 100000, 9396.926207859084, -3420.201433256686, 100000, 9659.258262890684, -2588.190451025207, 100000, 9396.926207859084, -3420.201433256686, 0, 9396.926207859084, -3420.201433256686, 0, 9659.258262890684, -2588.190451025207, 0, 9659.258262890684, -2588.190451025207, 100000, 9659.258262890684, -2588.190451025207, 100000, 9848.077530122078, -1736.4817766693127, 100000, 9659.258262890684, -2588.190451025207, 0, 9659.258262890684, -2588.190451025207, 0, 9848.077530122078, -1736.4817766693127, 0, 9848.077530122078, -1736.4817766693127, 100000, 9848.077530122078, -1736.4817766693127, 100000, 9961.946980917455, -871.5574274765831, 100000, 9848.077530122078, -1736.4817766693127, 0, 9848.077530122078, -1736.4817766693127, 0, 9961.946980917455, -871.5574274765831, 0, 9961.946980917455, -871.5574274765831, 100000, 9961.946980917455, -871.5574274765831, 100000, 10000, 0, 100000, 9961.946980917455, -871.5574274765831, 0, 9961.946980917455, -871.5574274765831, 0, 10000, 0, 0, 10000, 0, 100000];

var CX = function (radius, angle) {
    return radius * Math.cos(angle);
}
var CY = function (radius, angle) {
    return radius * Math.sin(angle);
}

var radian2angle = function (angle) {
    return angle * Math.PI / 180;
}

// var radius = CY(6371000, radian2angle(10));

// var _$arr = [];
// for (let i = 0; i < 360; i += 1) {
//     var radian = radian2angle(i)
//     var next_radian = radian2angle(i + 1);
//     _arr.push(0, 0, 0);
//     _arr.push(CX(radius, radian), CY(radius, radian), -6371000);
//     _$arr.push([CX(radius, radian), CY(radius, radian), -6371000]);
//     _arr.push(CX(radius, next_radian), CY(radius, next_radian), -6371000);
// }


var computeRadius = function (height, radius) {
    var point = [];
    for (let i = 0; i < 360; i += 5) {
        var radian = radian2angle(i);
        point.push([CX(radius, radian), CY(radius, radian), height]);
    };
    return point;
}

var CreateBarrelVertexArray = function (height, radius) {
    var topPoints = computeRadius(height, radius);
    var bottomPoints = computeRadius(0, radius);
    var arr = [];
    for (let i = 0; i < topPoints.length; i++) {
        let nextLength = i + 1 == topPoints.length ? 0 : i + 1;
        const top = topPoints[i];
        const topNext = topPoints[nextLength];
        const bottom = bottomPoints[i];
        const bottomNext = bottomPoints[nextLength];
        arr.push(top[0], top[1], top[2]);
        arr.push(topNext[0], topNext[1], topNext[2]);
        arr.push(bottom[0], bottom[1], bottom[2]);
        arr.push(bottom[0], bottom[1], bottom[2]);
        arr.push(bottomNext[0], bottomNext[1], bottomNext[2]);
        arr.push(topNext[0], topNext[1], topNext[2]);
    }
    return arr;
}

// _arr = CreateBarrelVertexArray(100000, 10000)
var arr = _arr
var _temp = null;
var PointB = null;
var pointBPosition = [];
var _update = () => {
    return pointBPosition;
}

export default {
    data() {
        return {
            SenceMode: '3D',
            heading: 0,
            pitch: 0,
            roll: 0,
            Color: 'rgba(100,0,255,0.4)',
        }
    },
    watch: {
        heading() {
            let r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(this.heading), Cesium.Math.toRadians(this.pitch), Cesium.Math.toRadians(this.roll));
            modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, r, Cesium.Ellipsoid.WGS84, Cesium.Transforms.eastNorthUpToFixedFrame, new Cesium.Matrix4())
            _temp._modelMatrix = modelMatrix;
            this.PointB();
        },
        pitch() {
            let r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(this.heading), Cesium.Math.toRadians(this.pitch), Cesium.Math.toRadians(this.roll));
            modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, r, Cesium.Ellipsoid.WGS84, Cesium.Transforms.eastNorthUpToFixedFrame, new Cesium.Matrix4())
            _temp._modelMatrix = modelMatrix;
            this.PointB();
        },
        roll() {
            let r = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(this.heading), Cesium.Math.toRadians(this.pitch), Cesium.Math.toRadians(this.roll));
            modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, r, Cesium.Ellipsoid.WGS84, Cesium.Transforms.eastNorthUpToFixedFrame, new Cesium.Matrix4())
            _temp._modelMatrix = modelMatrix;
            this.PointB();
        },
        Color(value) {
            _temp._color = this.rgba2Color(value);
        },
    },
    mounted() {
        map = simpleMap.initMap(this.$refs.MapView, {
            mapOptions: {
                // animation: false, // 关闭默认动画事件
                senceMode: this.SenceMode, // 初始化时，以2D模式进行渲染
            },
        });
        map.addProviders(mapConfig);
        var viewer = map.getViewer();
        viewer.entities.add({
            position: position,
            point: {
                show: true, //是否展示
                pixelSize: 4, //点的大小
                color: Cesium.Color.YELLOW, //颜色
                outline: true,
                outlineWidth: 1,
                // outlineColor: this.selectColor,
                disableDepthTestDistance: Number.POSITIVE_INFINITY,
            },
        });


        PointB = viewer.entities.add({
            position: position,
            orientation: modelMatrix,
            polyline: {
                positions: new Cesium.CallbackProperty(_update, false),
                material: new Cesium.Color(1, 0, 0, 1),  // 线的颜色
                width: 2, // 宽度
            }
        })

        _temp = new Trangles({ viewer, modelMatrix, arr, color })
        viewer.scene.primitives.add(_temp)

        this.PointB();

        viewer.zoomTo(viewer.entities);
    },
    methods: {
        PointB() {
            return;
            var viewer = map.getViewer();
            var _arr = [];

            var renderPoint = function (element) {
                let _localPos = new Cesium.Cartesian3(element[0], element[1], element[2]);
                let _worldPointX = Cesium.Matrix4.multiplyByPoint(modelMatrix, _localPos, new Cesium.Cartesian3());
                let result = new Cesium.Cartesian3();
                let direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(_worldPointX, position, result), result);
                var _ray = new Cesium.Ray(position, direction)
                var intersection = Cesium.IntersectionTests.rayEllipsoid(_ray, viewer.scene.globe.ellipsoid);
                if (intersection) {
                    var p = Cesium.Ray.getPoint(_ray, intersection.start);
                    return p
                } else {
                    return undefined;
                }
            }

            for (let i = 0; i < _$arr.length; i++) {
                const element = _$arr[i];
                var point = renderPoint(element);
                point && _arr.push(point);
            }
            if (_arr[0]) {
                _arr.push(_arr[0].clone());
            }

            pointBPosition = _arr
        },
        rgba2Color(value) {
            const regex = /(?<=\().+?(?=\))/g; // [] 中括号    
            var _value = value.match(regex)[0].split(',');
            return new Cesium.Color(_value[0] / 255, _value[1] / 255, _value[2] / 255, _value[3]);
        },
        changeSenceMode(type) {
            this.SenceMode = type;
            // 更改当前的显示模式
            map.SenceMode = type;
        },
    },
    beforeDestroy() {
        // 页面被注销时，销毁地图
        map && map.destroy();
        map = null;
    }
}
</script>

<style>
.layout {
    height: 100%;
    width: 100%;
}

.control {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px 20px;
    color: #fff;
    z-index: 4;
}
.title {
    color: #fff;
}
.Text {
    color: #fff;
    background: rgba(0, 0, 0, 0.4);
    padding: 10px;
}
.itemBox {
    margin-bottom: 5px;
}
</style>